<template>
  <div>
    <el-tabs v-model="adsIndex" @tab-click="handleClick" class="manager-tabs">
	    <el-tab-pane label="图片素材" name='0'></el-tab-pane>
	    <el-tab-pane label="视频素材" name='1'></el-tab-pane>
	    <el-tab-pane label="受众管理" name='2'></el-tab-pane>
	  </el-tabs>
    <nuxt-child/>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {Tabs, TabPane , Scrollbar} from 'element-ui';
  import { changeParam, getParam} from '~/assets/js/global'
  import { ADS_INDEX } from '../../store/mutation-types/adv-assets/index.js'
  import { mapGetters} from 'vuex';

  Vue.use(Tabs);
  Vue.use(TabPane);
  Vue.use(Scrollbar);

  export default {
    data() {
      return {
      };
    },
    head(){
        return{
            title: 'ADS-广告资产'
        }
    },
    watch: {
    	
    },
    components: {
        
    },
    methods: {
      handleClick(tab, event) {
        this.$router.push('/adv-assets/assets/'+ tab.name)
        this.$store.commit(ADS_INDEX, { adsIndex: tab.name});
      },
      changeTabs(){
          let url = window.location.href;
          url = url.substring(url.lastIndexOf("/"));
          let tab = url.charAt(1);
          switch (tab){
              case '1':
                  this.$store.commit(ADS_INDEX, { adsIndex: '1'});
                  break;
              case '2':
                  this.$store.commit(ADS_INDEX, { adsIndex: '2'});
                  break;
              default:
                  this.$store.commit(ADS_INDEX, { adsIndex: '0'});
          }
      },
    },
    computed : {
        ...mapGetters({
                'adsIndex' : 'getAdsIndex'
            })
    },
    mounted() {
      this.changeTabs()
    }
  };
</script>
<style lang="scss">
	.ads-header {
		margin: 0;
		background-color: #fff;
		font-size: 16px;
	}
	.el-tabs__header{
		margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #d1dbe5 !important;

	}
</style>